<template>
  <div>
    <div class="home-top" ref="top">
      <mt-header title="首页"></mt-header>
      <mt-search style="height: 52px;" placeholder="搜索" v-model="search" @keyup.enter.native="getFilter()"></mt-search>
      <div style="display: flex; margin:0 10px 7px;">
        <div @click="showStatus" style=" "><i class="gray">状态 : </i><i>{{ statusTxt }}</i><i class="fa fa-caret-down f16 ml5"></i></div>
        <div @click="showKind" style="margin-left: 20px;"><i class="gray">类型 : </i><i>{{ kindTxt }}</i><i class="fa fa-caret-down f16 ml5"></i></div>
      </div>   
      <div style="margin:0 8px 7px;" v-show="statusShow" class="btn-topbar">
        <button style="flex:.8" class="btn-effect"  :class='{"btn-sel":status === ""}'           @click="getFilter(); status = ''" >全部</button>
        <button style="flex:1" class="btn-effect"   :class='{"btn-sel":status === "ENTERING"}'   @click="getFilter(); status = 'ENTERING'"  >报名中</button>
        <button style="flex:1.2" class="btn-effect" :class='{"btn-sel":status === "ENTEROVER"}'  @click="getFilter(); status = 'ENTEROVER'" >报名结束</button>
        <button style="flex:1" class="btn-effect"   :class='{"btn-sel":status === "MATCHING"}'   @click="getFilter(); status = 'MATCHING'"  >比赛中</button>
        <button style="flex:1.2" class="btn-effect" :class='{"btn-sel":status === "MATCHOVER"}'  @click="getFilter(); status = 'MATCHOVER'" >比赛结束</button>
      </div>
      <div style="margin:0 8px 7px;" v-show="kindShow" class="btn-topbar">
        <button class="btn-effect" :class='{"btn-sel":kind === ""}'            @click="getFilter(); kind = ''">全部</button>
        <button class="btn-effect" :class='{"btn-sel":kind === "SIGNMATCH"}'   @click="getFilter(); kind = 'SIGNMATCH'">单项赛</button>
        <button class="btn-effect" :class='{"btn-sel":kind === "GROUPMATCH"}'  @click="getFilter(); kind = 'GROUPMATCH'">团体赛</button>
        <button class="btn-effect" :class='{"btn-sel":kind === "MIXMATCH"}'    @click="getFilter(); kind = 'MIXMATCH'">混合赛</button>
      </div>
    </div>
    <div ref="block"></div>
    <div style="overflow:auto;" v-show="!loading" ref="wrapper">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottomDistance="10" :topDistance="50" :autoFill="false" :bottomAllLoaded="!hasMore" ref="loadmore">
        <ul class="match-list">
          <li v-for="(item, index) in list" @click="toDetails(item.id,item.matchKind)" >
            <div class="match-item-img">
              <!-- <img v-show="parseInt(index%4) == 0" src="@/assets/img/match/1.jpg" >
              <img v-show="parseInt(index%4) == 1" src="@/assets/img/match/2.jpg" >
              <img v-show="parseInt(index%4) == 2" src="@/assets/img/match/3.jpg" >   -->            
              <img src="@/assets/img/banner.jpg" >
              <div :class="[ getKindClass(item.matchKind) ]">{{ getKindTxt(item.matchKind) }}</div>
            </div> 
            <div class="match-item-title"><i class="match-step" v-text=' getStatusTxt(item.status)'></i> {{item.matchName}} </div>
            <div class="match-item-con">
              <span class="match-item-t"><i class="fa fa-clock-o"></i>比赛时间</span>
              <span class="match-item-c">{{item.starttime}} 至 {{item.endtime}}</span>
            </div>
            <div class="match-item-con">
              <span class="match-item-t"><i class="fa fa-hourglass-end"></i>报名截止</span>
              <span class="match-item-c">{{ item.overtime}}</span>
            </div>
            <div class="match-item-con">
              <span class="match-item-t"><i class="fa fa-map-marker"></i>比赛地址</span>
              <span class="match-item-c">{{item.matchAddress}}</span>
            </div> 
          </li>
        </ul> 
      </mt-loadmore>
      <div class="no-more" v-show="!hasMore">没有更多…</div>
    </div>
    <div v-show="loading" class="loading-center" ref="loadBox"><mt-spinner :type="3" color="#999" :size="20"></mt-spinner>加载中…</div>    
    <main-nav active='首页'></main-nav>

    <div v-show="mask" @click="hideDrop" style="position:fixed; z-index: 101; width: 100%; height: 100%; top:0; left:0; background: rgba(0,0,0,.2);"></div>

    <mt-popup v-model="popupVisible" style="width: 90%;">
      <div style="margin:20px;">
        <h4 class="tc f16 mb20">2019长沙岳麓区第N届羽毛球邀请赛</h4>
        <mt-button size="large" type="primary" @click="$router.push('/match/'+currId+'?type=1')" style="margin-bottom:20px;">单项赛</mt-button>
        <mt-button size="large" type="danger"  @click="$router.push('/match/'+currId+'?type=2')" >团体赛</mt-button>
      </div>
    </mt-popup> 
  </div>
</template>

<script> 
var rows = [
  {
    "id": 1,
    "matchName": "双雄会",
    "starttime": "2019-07-03 17:19:25",
    "endtime": "2019-07-10 17:19:32",
    "matchStatus": 1,
    "saletotal": 121,
    "matchAddress": "羽星公园",
    "overtime": "2019-07-04 17:20:15",
    "matchKind": "MIXMATCH",
    "level" :[
      {
        "levelId":"1",
        "levelName":"单项赛",
        "children":[
          {
            "levelId":"001",
            "levelName":"少年组",
            "children":[
              {
                "levelId":"0011",
                "levelName":"15-20",
                "project":["MANDOUBLE","MANSINGLE"]
              },
              {
                "levelId":"0012",
                "levelName":"10-15"
              }
            ]
          },
          {
            "levelId":"002",
            "levelName":"成年组",
          }
        ]
      },
      {
        "levelId":"2",
        "levelName":"团体赛",
      }
    ]
  }
]



import mainNav from '@/components/mainNav'
export default { 
  components:{
    mainNav
  },
  data () {
    return {
      search:'',
      list:[],
      status:"", 
      statusArr:[{"val":"","text":"全部"},{"val":"ENTERING","text":"报名中"},{"val":"ENTEROVER","text":"报名结束"},{"val":"MATCHING","text":"比赛中"},{"val":"MATCHOVER","text":"比赛结束"}],
      kind:"",
      kindArr:[{"val":"","text":"全部"},{"val":"SIGNMATCH","text":"单项赛"},{"val":"GROUPMATCH","text":"团体赛"},{"val":"MIXMATCH","text":"混合赛"}],
      page:1,
      currId:null,
      loading:false,
      hasMore:false,
      popupVisible:false,
      mask:false,
      statusShow:false,
      kindShow:false,
    }
  },
  computed:{
    statusTxt(){
      return this.getTextByVal(this.statusArr,this.status);
    },
    kindTxt(){
      return this.getTextByVal(this.kindArr,this.kind);
    }
  },
  mounted: function (){
    var t_h = this.$refs.top.offsetHeight;
    this.$refs.block.style.height = t_h + "px";
    this.$refs.wrapper.style.height = document.documentElement.clientHeight - t_h - 53 + "px"; 
    this.$refs.loadBox.style.height = document.documentElement.clientHeight - t_h - 53 + "px"; 
    this.getFilter();
  },
  methods:{
    toDetails(id,kind){
      if(kind == "MIXMATCH"){
        this.currId = id;
        this.popupVisible = true; 
      }
      else this.$router.push('/match/'+id + "?kind=" + kind);
    },
    getList(reset){
      if(!reset) this.page = 1;
/*
      this.list  = [
        {
          "id":1,
          "imgUrl":"",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "kind":"SIGNMATCH",
          "starttime":"2019-07-01",
          "endtime":"2019-07-08",
          "overtime":"2019-06-31",
          "status":"ENTERING",
          "matchAddress":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":1,
          "imgUrl":"",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "kind":"GROUPMATCH",
          "starttime":"2019-07-01",
          "endtime":"2019-07-08",
          "overtime":"2019-06-31",
          "status":"ENTEROVER",
          "matchAddress":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":1,
          "imgUrl":"",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "kind":"MIXMATCH",
          "starttime":"2019-07-01",
          "endtime":"2019-07-08",
          "overtime":"2019-06-31",
          "status":"ENTERING",
          "matchAddress":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":1,
          "imgUrl":"",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "kind":"SIGNMATCH",
          "starttime":"2019-07-01",
          "endtime":"2019-07-08",
          "overtime":"2019-06-31",
          "status":"MATCHING",
          "matchAddress":"湖南省长沙市岳麓区体育馆"
        },
        {
          "id":1,
          "imgUrl":"",
          "matchName":"2019长沙岳麓区第N届羽毛球邀请赛",
          "kind":"SIGNMATCH",
          "starttime":"2019-07-01",
          "endtime":"2019-07-08",
          "overtime":"2019-06-31",
          "status":"ENTERING",
          "matchAddress":"湖南省长沙市岳麓区体育馆"
        }
      ];
      this.loading = false;
      this.hasMore = false;

*/
      
      setTimeout(()=>{
        this.axios.post(this._site + 'match/list',{
            pageNo: this.page,
            pageSize:10,
            matchName:this.search,
            matchKind:this.kind,
            status: this.status
        }).then(response => {
          //设置拉拽加载结束 
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();
          var res = response.data;
          this.loading = false; 
          if(res == null){ 
            return;
          }
          if(!reset) this.list = []; 
          this.list = this.list.concat(res.rows);
          if(this.list.length > 30){
            this.hasMore = false;
          }else{
            this.page++;
          } 
        }).catch(error => {
          //设置拉拽加载结束
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();
          this.$toast({message: '加载异常'});
          this.loading = false; 
        });
      },500)
    },
    getFilter(){ 
      this.hideDrop();
      this.page = 1;
      this.loading = true;
      this.loadTop();
      this.$refs.wrapper.scrollTop = 0;
    },    
    loadTop(){
      this.hasMore = true;
      this.getList();
    },
    loadBottom(){
      this.getList(true);
    },
    getStatusTxt(status){
      return this.getTextByVal(this.statusArr,status);
    },
    getKindTxt(kind){
      return this.getTextByVal(this.kindArr,kind);
    },
    getKindClass(t){
      var s;
      if(t == "SIGNMATCH") s = "match-type-1";
      else if(t == "GROUPMATCH") s = "match-type-2";
      else s = "match-type-3";
      return s;
    },
    showStatus(){
      if(this.statusShow){
        this.hideDrop();
      }else{        
        this.mask = true;
        this.statusShow = true;
        this.kindShow = false;
      }
    },
    showKind(){
      if(this.kindShow){        
        this.hideDrop();
      }else{        
        this.mask = true;
        this.kindShow = true;
        this.statusShow = false;
      }
    },
    hideDrop(){      
      this.mask = false;
      this.statusShow = false;
      this.kindShow = false;
    },
    getTextByVal(list,val){      
      var str = "";
      for (var i = 0; i < list.length; i++) {
        if(list[i]["val"] === val){
          str = list[i]["text"];
          break;
        }
      }
      return str
    }
  }
}

</script>
